<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>工作种类：{{job.type}}</h2>
  <h2>工作薪水：{{job.salary}}</h2>
  <button @click="changeInfo">修改信息</button>
</template>

<script>
import {ref} from "vue";

export default {
  name: "App",
  setup() {
    let name = ref('张三');
    let age = ref(18);
    let job = ref({
      type:'前端工程师',
      salary:3000
    });

    function changeInfo() {
      name.value = '李四';
      age.value = 48;
      job.value.type = 'UI设计师';
      job.value.salary = 4000;
    }

    // 返回一个对象（常用）
    return {
      name,
      age,
      job,
      changeInfo
    }
  },
}
</script>

<style scoped>

</style>